<template>
    <div class="pre-box" :style="{transform: prestyle}">
        <h1>WELCOME!</h1>
        <div class="img-box">
            <img :src='imgurl' alt="loading..." loading="lazy">
        </div>
    </div>
</template>

<script setup>
    import { computed, watch } from 'vue';
    import { useRoute } from 'vue-router';
    import { LoginRegsiterSwtich } from '@/utils/slide.js';

    const store = LoginRegsiterSwtich();
    const route = useRoute();

    const imgurl = computed(() => store.currentImgUrl(route.path));
    const prestyle = computed(() => store.currentPreStyle(route.path));

    // 监听路由变化并更新
    watch(() => route.path, (newPath) => {
        imgurl.value = store.currentImgUrl(newPath);
        prestyle.value = store.currentPreStyle(newPath);
    });

</script>

<style scoped>
    .pre-box {
        height: 100%;
        width: 50%;
        box-shadow: 2px 1px 19px rgba(0, 0, 0, 0.1);
        border-radius: 5px;
        text-align: center;
        background-color: #edd4dc;
        transition: 0.5s ease-in-out;
        z-index: 2;
        position:absolute;
        top: 0;
        left: 0;
    }
    
    .pre-box h1{
        margin-top: 30%;
        letter-spacing: 5px;
        text-shadow: 5px 5px 4px rgba(0,0,0,.1);
        color: white;
    }

    .img-box{
        height: 35%;
        aspect-ratio: 1;
        margin: 5% auto;
        border-radius: 50%;
        overflow: hidden;
        box-shadow:4px 4px 3px rgba(0,0,0,.1);
    }
    .img-box img{
        width:100%;
    }
</style>